import { createRouter, createWebHistory } from "vue-router";
// 引入 nprogress
import NProgress from "nprogress";
// 引入 nprogress 的样式
import "nprogress/nprogress.css";

import Films from "../views/films.vue";
import Cinemas from "../views/cinemas.vue";
import Posts from "../views/posts.vue";
import Center from "../views/center.vue";
import Login from "../views/login.vue";
import Home from "../views/home.vue";
import NowPlaying from "../views/nowPlaying.vue";
import ComingSoon from "../views/comingSoon.vue";
import Order from "../views/order.vue";
import RedBag from "../views/redbag.vue";

// NProgress.start(); // 开启进度条

// setTimeout(() => {
//   NProgress.done(); // 让进度条完成
// }, 3000);

NProgress.configure({
  showSpinner: false, // 不要小圆圈
});

/**
 * 路由守卫（导航守卫）
 *    概念：
 *       在路由跳转时，不同时机触发的函数，就叫做路由守卫。
 *       守卫：一个保安，在路由跳转时控制是否允许跳转
 *
 *    1. 全局守卫
 *       1. 全局前置  beforeEach
 *          应用场景：
 *            1. 与 全局后置一起 配合 nprogress 实现路由跳转时的进度条效果
 *            2. 做登录拦截功能。
 *            3. 路由权限处理
 *       2. 全局后置  afterEach
 *          应用场景：
 *            1. 修改页面的 title
 *            2. 统计页面的 访问量
 *              1. 如果使用第三方的则我们无需额外处理，比如百度统计
 *              2. 如果公司要自行处理统计，一般就是后端提供一个统计的接口，我们在当前的函数中做接口的调用即可。
 *              pv - page view
 *              uv - user view
 *       3. 全局解析  beforeResolve
 *    2. 路由独享
 *       1. beforeEnter
 *          应用场景：
 *            1. 做单个路由的登录状态的判断
 *    3. 组件内守卫
 *       1. beforeRouteEnter
 *          应用场景：
 *            1. 提前调用接口，访问不到组件的实例this，需要通过 next((vm) => {})
 *       2. beforeRouteUpdate
 *          应用场景：
 *            1. 响应路由参数变化，（处理详情页跳转详情页数据不更新的问题）
 *       3. beforeRouteLeave
 *          应用场景：
 *            1. 离开时的二次确认。 window.confirm()
 *
 *    守卫函数一般会收到三个参数：
 *       1. to - 要去哪儿的路由信息
 *       2. from - 来自哪儿的路由信息
 *       3. next - 控制是否放行的一个函数
 *          1. VueRouter@3 中，是必须的。
 *          2. VueRouter@4 中，是可选的。
 *
 *          放行:
 *              next()
 *          不放行，中止导航:
 *              next(false)
 *              不调用 next
 *          重定向到 /login:
 *              next('/login')
 *              next({ path: '/login' })
 *
 *          下面是路由4版本的玩法，不需要传递 next
 *          放行：
 *            return
 *            不 return
 *          不放行，中止导航:
 *            return false
 *          重定向到 /login:
 *            return '/login'
 *            return { path: '/login' }
 */

const router = createRouter({
  history: createWebHistory(),

  routes: [
    {
      path: "/login",
      component: Login,
      // 路由元信息
      //    里面随意配置你后续可能有得到的 key-value
      meta: {
        title: "登录",
      },
    },
    {
      path: "/order",
      component: Order,
      meta: {
        title: "订单",
        needLogin: true,
      },
    },
    {
      path: "/red",
      component: RedBag,
      meta: {
        title: "红包",
        needLogin: true,
      },
    },
    {
      path: "/",
      component: Home,
      meta: {
        title: "首页",
      },
      children: [
        {
          path: "films",
          component: Films,
          meta: {
            title: "电影列表",
          },
          children: [
            {
              path: "nowPlaying",
              component: NowPlaying,
              meta: {
                title: "电影列表-正在热映",
              },
            },
            {
              path: "comingSoon",
              component: ComingSoon,
              meta: {
                title: "电影列表-即将上映",
              },
            },
          ],
        },
        {
          path: "cinemas",
          component: Cinemas,
          meta: {
            title: "影院列表",
          },
          beforeEnter(to, from) {
            // next(false); // 阻止导航
            // next("/login"); // 去到 /login
            // return false; // 阻止导航
            // return "/login";
            if (!window.isLogin) {
              // 没有登录，直接重定向到登录页面
              return {
                path: "/login",
                query: {
                  redirect: to.fullPath,
                },
              };
            }
          },
        },
        {
          path: "posts",
          component: Posts,
          meta: {
            title: "资讯列表",
          },
        },
        {
          path: "center",
          component: Center,
          meta: {
            title: "个人中心",
          },
        },
      ],
    },
  ],
});

// 定义一个需要登录的路由路径的集合
const needLoginPaths = ["/order", "/red"];

// 全局前置
router.beforeEach((to, from, next) => {
  console.log("全局前置", to, from);
  NProgress.start();
  // if (needLoginPaths.includes(to.path)) {
  if (to.meta.needLogin) {
    if (window.isLogin) {
      // 登录了，放行
      next();
    } else {
      // 没有登录，重定向到 登录页面
      // next("/login");

      // 重定向到登录页面的时候，携带过去当前的路径参数
      next({
        path: "/login",
        query: {
          // redirect: to.path,
          redirect: to.fullPath,
        },
      });
    }
  } else {
    next();
  }
});

// 全局后置
//   1. 没有 next 参数，
router.afterEach((to, from) => {
  NProgress.done();

  document.title = to.meta.title;
  console.log("全局后置", to);
});

export default router;
